21 augustus 2025Nederlands

Ontdek CSS Container Queries, de volgende evolutie in responsive design. Leer hoe je aanpasbare componenten maakt op basis van de containergrootte, niet alleen de viewportgrootte.

CSS Container Queries: Een revolutie in elementgebaseerd responsive design

Responsive design is al meer dan een decennium een hoeksteen van webontwikkeling. Traditioneel vertrouwden we op media queries om onze lay-outs aan te passen op basis van de viewportgrootte. Deze aanpak kan echter soms beperkend aanvoelen, vooral bij complexe, componentgebaseerde ontwerpen. Maak kennis met CSS Container Queries – een krachtige nieuwe functie waarmee componenten zich kunnen aanpassen op basis van de grootte van hun bevattende element, niet alleen de viewport.

Wat zijn CSS Container Queries?

Container queries zijn een 'game-changer' omdat ze elementgebaseerd responsive design mogelijk maken. In plaats van te vragen "Wat is de schermgrootte?", kun je vragen "Hoeveel ruimte heeft dit component beschikbaar?". Dit opent een wereld van mogelijkheden voor het creëren van echt herbruikbare en aanpasbare componenten.

Denk aan een kaartcomponent dat in verschillende contexten kan verschijnen: een smalle zijbalk, een brede 'hero'-sectie of een raster met meerdere kolommen. Met media queries zou je specifieke regels moeten schrijven voor elk van deze scenario's op basis van de viewportbreedte. Met container queries kan de kaart zijn lay-out en styling intelligent aanpassen op basis van de afmetingen van zijn bovenliggende container, ongeacht de totale schermgrootte.

Waarom container queries gebruiken?

Container queries bieden verschillende belangrijke voordelen ten opzichte van traditionele media queries:

Verbeterde herbruikbaarheid van componenten: Creëer componenten die zich naadloos aanpassen aan verschillende lay-outs zonder complexe media query-logica te vereisen.
Vereenvoudigde code: Verminder de hoeveelheid benodigde CSS door responsief gedrag binnen het component zelf in te kapselen.
Verbeterd onderhoudsgemak: Maak het eenvoudiger om je codebase bij te werken en te onderhouden door responsieve logica te isoleren in individuele componenten.
Intuïtiever ontwerp: Ontwerp componenten die reageren op hun directe omgeving, wat leidt tot een natuurlijkere en voorspelbaardere gebruikerservaring.
Grotere flexibiliteit: Realiseer complexere en genuanceerdere responsive ontwerpen die moeilijk of onmogelijk te bereiken zijn met alleen media queries.

Hoe CSS Container Queries te implementeren

Laten we dieper ingaan op de praktische aspecten van het gebruik van container queries. De eerste stap is het declareren van een container. Dit kun je doen met de eigenschap container-type op het bovenliggende element:

1. Een container definiëren

De eigenschap container-type accepteert verschillende waarden:

size: De container queries reageren op zowel de inline- als de block-afmetingen van de container.
inline-size: De container queries reageren alleen op de inline-afmeting (breedte in horizontale schrijfmodi) van de container. Dit is de meest voorkomende en vaak de meest bruikbare optie.
block-size: De container queries reageren alleen op de block-afmeting (hoogte in horizontale schrijfmodi) van de container.
normal: Het element is geen query-container. Dit is de standaardwaarde.
style: De container queries reageren op style queries en container name queries (later behandeld), waardoor je custom properties kunt bevragen die op de container zijn ingesteld.

Hier is een voorbeeld van het definiëren van een container die reageert op zijn inline-grootte:


.card-container {
  container-type: inline-size;
}

Je kunt ook de verkorte eigenschap container gebruiken om zowel container-type als container-name (die we later bespreken) in één declaratie te specificeren:


.card-container {
  container: card / inline-size;
}

In dit geval is 'card' de naam van de container.

2. Container queries schrijven

Zodra je een container hebt gedefinieerd, kun je de @container at-rule gebruiken om je queries te schrijven. De syntaxis is vergelijkbaar met media queries, maar in plaats van je te richten op de afmetingen van de viewport, richt je je op de afmetingen van de container:


@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
  }
  .card__content {
    width: 50%;
  }
}

In dit voorbeeld richten we ons op de "card"-container en passen we stijlen toe op de elementen .card, .card__image en .card__content wanneer de breedte van de container ten minste 400px is. Let op de `card` vóór `(min-width: 400px)`. Dit is cruciaal wanneer je je container een naam hebt gegeven met container-name of de verkorte `container`-eigenschap.

Als je je container geen naam hebt gegeven, kun je de containernaam weglaten:


@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
  }
  .card__content {
    width: 50%;
  }
}

Je kunt dezelfde reeks media features gebruiken die beschikbaar zijn in media queries, zoals min-width, max-width, min-height, max-height en oriëntatie.

3. Containernamen

Het benoemen van je containers kan handig zijn, vooral bij geneste containers of complexe lay-outs. Je kunt een naam toewijzen aan een container met de eigenschap container-name:


.card-container {
  container-name: card;
  container-type: inline-size;
}

Vervolgens kun je in je container queries de container op naam targeten:


@container card (min-width: 400px) {
  /* Stijlen voor de 'card' container */
}

4. Style Queries

Met Container Style Queries kun je reageren op de stijl van je container in plaats van op de grootte. Dit is bijzonder krachtig in combinatie met custom properties. Eerst moet je je container definiëren met container-type: style:


.component-container {
  container-type: style;
}

Vervolgens kun je @container style(--theme: dark) gebruiken om de waarde van de custom property --theme te bevragen:


.component-container {
  --theme: light;
}

@container style(--theme: dark) {
  .component {
    background-color: black;
    color: white;
  }
}

Hiermee kunnen je componenten zich aanpassen op basis van een configuratie die via CSS wordt ingesteld in plaats van via de viewportgrootte. Dit opent geweldige mogelijkheden voor thematisering en dynamische styling.

Praktische voorbeelden van Container Queries

Laten we kijken naar enkele concrete voorbeelden van hoe container queries kunnen worden gebruikt in praktijkscenario's:

Voorbeeld 1: Een kaartcomponent

Stel je een kaartcomponent voor dat informatie over een product weergeeft. In een smalle container willen we misschien de afbeelding en de inhoud verticaal stapelen. In een bredere container kunnen we ze naast elkaar weergeven.

HTML:



  
    
    
      Product Title
      Product description goes here.
      Learn More

CSS:


.card-container {
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 16px;
}

.card__image {
  width: 100%;
  margin-bottom: 16px;
}

.card__content {
  width: 100%;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
    margin-bottom: 0;
  }
  .card__content {
    width: 50%;
  }
}

In dit voorbeeld zal de kaart in eerste instantie de afbeelding en de inhoud verticaal gestapeld weergeven. Wanneer de breedte van de container 400px bereikt, schakelt de kaart over naar een horizontale lay-out.

Voorbeeld 2: Een navigatiemenu

Denk aan een navigatiemenu dat zich moet aanpassen op basis van de beschikbare ruimte. In een smalle container (bijv. een mobiele zijbalk) willen we de menu-items misschien in een verticale lijst weergeven. In een bredere container (bijv. een desktop header) kunnen we ze horizontaal weergeven.

HTML:



  
    Home
    Products
    Services
    About
    Contact

CSS:


.nav-container {
  container-type: inline-size;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__item {
  margin-bottom: 8px;
}

.nav__item a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav {
    display: flex;
  }
  .nav__item {
    margin-right: 16px;
    margin-bottom: 0;
  }
  .nav__item a {
    display: inline-block;
  }
}

In dit voorbeeld zal het navigatiemenu in eerste instantie de items in een verticale lijst weergeven. Wanneer de breedte van de container 600px bereikt, schakelt het menu over naar een horizontale lay-out.

Voorbeeld 3: Artikellay-out met uitgelichte afbeelding

Stel je een artikellay-out voor die zich moet aanpassen afhankelijk van waar deze wordt geplaatst. Als het in een klein voorbeeldgedeelte staat, moet de afbeelding boven de tekst staan. Als het het hoofdartikel is, kan de afbeelding aan de zijkant staan.

HTML



    
        
        
            Article Title
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...

CSS


.article-container {
    container-type: inline-size;
}

.article {
    display: flex;
    flex-direction: column;
}

.article-image {
    width: 100%;
    margin-bottom: 10px;
}

.article-content {
    width: 100%;
}

@container (min-width: 768px) {
    .article {
        flex-direction: row;
    }

    .article-image {
        width: 40%;
        margin-right: 20px;
        margin-bottom: 0;
    }

    .article-content {
        width: 60%;
    }
}

Browserondersteuning

De browserondersteuning voor container queries is nu uitstekend in moderne browsers, waaronder Chrome, Firefox, Safari en Edge. Het is belangrijk om Can I Use te raadplegen voor de meest recente informatie over browserondersteuning, aangezien functies en implementatiedetails kunnen evolueren.

Overwegingen en Best Practices

Prestaties: Hoewel container queries aanzienlijke voordelen bieden, is het belangrijk om rekening te houden met de prestaties. Overmatig gebruik van complexe container queries kan mogelijk de renderingprestaties beïnvloeden, vooral op oudere apparaten. Test grondig en optimaliseer je code waar nodig.
Nesten: Container queries kunnen worden genest, waardoor je nog complexere en aanpasbare ontwerpen kunt maken. Wees echter voorzichtig om je lay-outs niet te ingewikkeld te maken, omdat dit ze moeilijk te begrijpen en te onderhouden kan maken.
Specificiteit: Container queries hebben een hogere specificiteit dan media queries, dus wees je bewust van hoe ze interageren met andere CSS-regels. Gebruik CSS-specificiteitstools als je onverwacht stylinggedrag tegenkomt.
Progressive Enhancement: Overweeg het gebruik van container queries als een 'progressive enhancement'. Bied een basislay-out die goed werkt zonder container queries, en gebruik vervolgens container queries om de lay-out te verbeteren voor browsers die dit ondersteunen.
Design Systems: Container queries zijn bijzonder geschikt voor gebruik in design systems. Ze stellen je in staat om herbruikbare componenten te creëren die gemakkelijk kunnen worden aangepast aan verschillende contexten binnen je applicatie.

Container Queries vs. Media Queries: Wanneer gebruik je wat?

Hoewel container queries een krachtig alternatief bieden voor media queries, is het belangrijk te begrijpen wanneer elke aanpak het meest geschikt is.

Media Queries: Gebruik media queries wanneer je je lay-out moet aanpassen op basis van de algehele schermgrootte of apparaatkenmerken (bijv. oriëntatie, resolutie). Media queries zijn ideaal voor het maken van brede wijzigingen in je lay-out om ervoor te zorgen dat deze bruikbaar is op verschillende apparaten.
Container Queries: Gebruik container queries wanneer je individuele componenten moet aanpassen op basis van de beschikbare ruimte. Container queries zijn ideaal voor het creëren van herbruikbare componenten die zich naadloos kunnen aanpassen aan verschillende contexten binnen je applicatie.

In veel gevallen zul je waarschijnlijk een combinatie van zowel media queries als container queries gebruiken. Gebruik media queries om de algehele lay-out van je applicatie vast te stellen, en gebruik vervolgens container queries om het uiterlijk en gedrag van individuele componenten binnen die lay-out te verfijnen.

De toekomst van Responsive Design

CSS Container Queries vertegenwoordigen een belangrijke stap voorwaarts in de evolutie van responsive design. Door elementgebaseerde responsiviteit mogelijk te maken, stellen ze ontwikkelaars in staat om flexibelere, herbruikbare en beter onderhoudbare componenten te creëren. Naarmate de browserondersteuning blijft verbeteren, staan container queries op het punt een essentieel hulpmiddel te worden in het arsenaal van elke webontwikkelaar.

Globale overwegingen

Houd bij het implementeren van container queries voor een wereldwijd publiek rekening met het volgende:

Tekstrichting: Zorg ervoor dat je container queries correct werken met zowel links-naar-rechts (LTR) als rechts-naar-links (RTL) tekstrichtingen. Gebruik logische eigenschappen zoals inline-start en inline-end in plaats van fysieke eigenschappen zoals left en right.
Lettergrootte: Verschillende talen kunnen verschillende lettergroottes vereisen voor optimale leesbaarheid. Gebruik relatieve lettergroottes (bijv. em, rem) om ervoor te zorgen dat je tekst correct schaalt.
Lengte van de inhoud: Sommige talen hebben mogelijk meer ruimte nodig om dezelfde informatie uit te drukken als het Engels. Zorg ervoor dat je je lay-outs test met verschillende talen om te garanderen dat je componenten wisselende inhoudslengtes kunnen accommoderen.
Culturele conventies: Wees je bewust van culturele conventies bij het ontwerpen van je componenten. De plaatsing van afbeeldingen en tekst kan bijvoorbeeld per cultuur verschillen.

Conclusie

CSS Container Queries zijn een krachtig hulpmiddel voor het bouwen van echt responsieve en aanpasbare webapplicaties. Door elementgebaseerd responsive design te omarmen, kun je componenten creëren die zich naadloos aanpassen aan verschillende contexten, je code vereenvoudigen en de algehele gebruikerservaring verbeteren. Naarmate de browserondersteuning blijft groeien, staan container queries op het punt een fundamenteel onderdeel te worden van de moderne webontwikkeling. Omarm deze technologie, experimenteer met de mogelijkheden ervan en ontgrendel een nieuw niveau van flexibiliteit in je responsive ontwerpen. Deze aanpak maakt betere herbruikbaarheid en onderhoudbaarheid van componenten mogelijk, en een intuïtiever ontwerpproces, wat het een onschatbare aanwinst maakt voor front-end ontwikkelaars wereldwijd. De overstap naar container queries moedigt een meer componentgerichte benadering van design aan, wat resulteert in robuustere en aanpasbare webervaringen voor gebruikers over de hele wereld.